<template>
  <div class="animation" :style="{ top: this.$props.fromY + 'px', left: this.$props.fromX + 'px' }" ref="box"></div>
</template>

<script>
export default {
  name: 'CartItemAnimation',
  props: {
    fromX: {
      type: Number,
      default: 0
    },
    toX: {
      type: Number,
      default: 0
    },
    fromY: {
      type: Number,
      default: 0
    },
    toY: {
      type: Number,
      default: 0
    }
  },
  mounted () {
    const that = this
    setTimeout(() => {
      this.$refs.box.style.left = this.$props.toX + 100 + 'px'
      this.$refs.box.style.top = this.$props.toY + 'px'
      this.$refs.box.style.width = 0
      this.$refs.box.style.height = 0
      setTimeout(() => {
        that.$emit('on-finish')
      }, 600)
    }, 30)
  }
}
</script>

<style scoped>
  .animation {
    width: 45px;
    height: 45px;
    background-color: #409EFF;
    z-index: 999;
    border-radius: 50%;
    position: fixed;
    transition: all .6s cubic-bezier(0.11, 0.92, 0.98, 0.75);
  }
</style>
